//
// 外协退货单
//
<template>
  <div class="AddOrUpdate_main add_container column_three">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="退货单号" prop="code">
          <CodeRuleInput
            :band-value.sync="formData.code"
            table-name="outsource_goods_return"
            column-name="code"
            :is-edit="id"
          />
        </el-form-item>
        <el-form-item v-if="!isAutomatically" label="退货人员">
          <el-input v-model="formData.returnByName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item v-if="isAutomatically" label="退货人员" class="clickChoose">
          <!-- <MultiUserSelect
            ref="MultiUserSelect"
            :parent="this"
            id-key="returnBy"
            name-key="returnByName"
          /> -->
          <el-input v-model="formData.returnByName" placeholder="请选择" readonly />
          <a
            class="clickChoose_button"
            @click.prevent="chooseUser"
          >
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
        <el-form-item label="退货日期">
          <el-date-picker
            v-model="formData.returnTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :editable="false"
          />
        </el-form-item>
        <el-form-item v-if="!isAutomatically" label="不良品处置单" class="clickChoose">
          <el-input v-model="formData.qualityDisqualificationDisposeCode" placeholder="请选择" readonly />
          <a
            class="clickChoose_button"
            @click.prevent="chooseOrders"
          >
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
        <el-form-item v-if="isAutomatically" label="不良品处置单">
          <el-input v-model="formData.qualityProductDisqualificationDisposeCode" placeholder="暂无" readonly disabled />
        </el-form-item>
        <el-form-item v-if="!isAutomatically" label="外协订单号" class="clickChoose">
          <el-input v-model="formData.outsourceOrderCode" placeholder="请选择" readonly />
          <a
            class="clickChoose_button"
            @click.prevent="purchaseOrder"
          >
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
        <el-form-item v-if="isAutomatically" label="外协订单号">
          <el-input v-model="formData.outsourceOrderCode" placeholder="请选择" readonly disabled />
        </el-form-item>
        <el-form-item label="外协供应商">
          <el-input v-model="formData.outsourceSupplierName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="附件" class="double">
          <FileManageFull
            :file-names="formData.fileName"
            :file-real-names="formData.fileRealName"
            :file-urls="formData.url"
            :row-index="1"
            @fileName="setFileName"
          />
        </el-form-item>
        <el-form-item label="退货原因" class="double">
          <el-input
            v-model="formData.reason"
            type="textarea"
            placeholder="请输入"
            maxlength="200"
            show-word-limit
            clearable
          />
        </el-form-item>
        <el-form-item label="备注" class="double">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-divider />
        <div class="formItem_header">供应商信息</div>
        <el-form-item v-if="formData.outsourceSupplierName" label="交货方式" class="clickChoose">
          <el-input v-model="formData.deliveryTypeLabel" placeholder="请选择" readonly />
          <a
            class="clickChoose_button"
            @click.prevent="chooseWays"
          >
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
        <el-form-item v-else label="交货方式">
          <el-input v-model="formData.deliveryTypeLabel" placeholder="暂无" readonly disabled />
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="formData.consignee" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="formData.contract" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="注意事项">
          <el-input v-model="formData.announcements" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="收货地址" class="double">
          <el-input v-model="formData.receiveAddress" type="textarea" placeholder="暂无" disabled />
        </el-form-item>
      </el-form>
      <div class="formItem_header">
        <div />
        <div v-if="formData.automaticCreate=='0' && !formData.qualityDisqualificationDisposeId" class="formItem_header_operate">
          <a class="formItem_header_operate_item" @click="addRow">
            <svg-icon icon-class="新增" />
            <div class="item_name">添加</div>
          </a>
          <a class="formItem_header_operate_item delete" @click="deleteRow">
            <svg-icon icon-class="删除" />
            <div class="item_name">删除</div>
          </a>
        </div>
        <div v-else class="formItem_header_operate" />
      </div>
      <div
        ref="table_container"
        class="table_container draggableTable"
      >
        <el-table
          ref="table"
          :data="listData"
          :height="tableHeight"
          stripe
          border
          style="width: 99.9%;"
          :header-cell-class-name="headerCellClassName"
          :cell-class-name="cellClassName"
          :summary-method="getSummaries"
          show-summary
          @selection-change="selectionChange"
        >
          <el-table-column v-if="formData.automaticCreate==0" width="70" type="selection" align="center" />
          <el-table-column label="物料编码" width="120" prop="saleCustomerOrderCode" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.materialCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物料名称" width="100" prop="saleCustomerDeliveryTime" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.materialName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" width="100" prop="saleCustomerMaterialCode" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.materialModel }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物料单位" width="100" prop="materialUnitName" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.materialUnitLabel }}</span>
            </template>
          </el-table-column>
          <el-table-column label="外协数量" :min-width="SETTINGS.settings_decimalDigits_length" prop="outsourceNumber">
            <template slot-scope="scope">
              <span>{{ scope.row.outsourceNumber }}</span>
            </template>
          </el-table-column>
          <!--     2024/1/12 方惠斯根据原型要去掉     -->
          <el-table-column v-if="!isAutomatically" label="不良数量" :min-width="SETTINGS.settings_decimalDigits_length" prop="disqualificationNumber">
            <template slot-scope="scope">
              <span>{{ scope.row.disqualificationNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column label="退货数量" fixed="right" :min-width="SETTINGS.settings_decimalDigits_length" prop="returnNumber">
            <template slot-scope="scope">
              <el-input v-model="scope.row.returnNumber" placeholder="请输入" clearable />
            </template>
          </el-table-column>
          <el-table-column label="备注" width="200" prop="remark">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" placeholder="请输入" clearable />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSave">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addOrUpdate, getInfo, outsourceOrder, outsourceRejectsDispose } from '@/api/outsourceManage/outsourceReturn'
import searchMaterial from './outSupplier'
import ChooseUser from './chooseUser'
import rejectsDispose from './addRejectsDispose'
import addSupplier from './addOutsourceSupplier'
import addOrder from './addOrder'
import moment from 'moment'
import Big from 'big.js' // big.js解决精度丢失问题
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {},
    isAdd: {}
  },
  data() {
    return {
      pageData: {
        pageNum: 1,
        pageSize: 9999,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      },
      formData: {
        automaticCreate: '0',
        code: '',
        consignee: '', // 收货人
        outsourceSupplierName: '', // 外协供应商名称
        outsourceOrderCode: '', // 外协订单号
        qualityDisqualificationDisposeCode: '', // 不良品处置单
        qualityProductDisqualificationDisposeCode: '', // 自动流转不良品处置单
        qualityDisqualificationDisposeId: '', // 不良品处置单id
        returnTypeCode: '', // 交货方式code
        fileName: '',
        fileRealName: '',
        url: '',
        remark: '',
        returnBy: '',
        returnByName: '',
        reason: '',
        contract: '', // 联系方式
        announcements: '', // 注意事项
        receiveAddress: '', // 收货地址
        supplierReturnGoodsId: '', // 交货方式id
        hasReturnNumber: '',
        outsourceOrderId: '',
        supplierId: '',
        purchaseOrderId: '',
        detailList: [],
        deliveryTypeLabel: '', // 交货方式
        returnTime: ''
      },
      isAutomatically: false,
      selections: [], // 表格当前页所选中的行
      selectionsAll: [], // 表格所有页选中的行
      outsourceOrderId: '', // 订单号id
      outsourceSupplierId: '', // 供应商id
      rejectsDisposeId: '', // 不良品处置单id
      listData: [],
      tableHeight: '',
      tableData: [],
      showListDataOne: false,
      rules: {
        code: [
          { required: true, message: '退货单号不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    listData() {
      if (this.listData.length > 7) {
        this.tableHeight = '390'
      } else {
        this.tableHeight = ''
      }
      console.log(this.listData)
      this.$refs['table'].doLayout()
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs['table'].doLayout()
    })
  },
  created() {
    if (!this.id) {
      // 没有id就是新增
      Object.keys(this.defaultValue).forEach((key) => {
        // 给右边数据赋值
        this.formData[key] = this.defaultValue[key]
      })
    } else {
      // 有id就是编辑
      this.getInfo()
      this.formData.id = this.id
    }
  },
  mounted() {
    this.formData.returnByName = this.$store.state.user.name
    this.formData.returnBy = this.$store.state.user.userId.toString()
    this.formData.returnTime = moment(new Date()).format('YYYY-MM-DD')
  },
  methods: {
    setFileName(...data) {
      this.$set(this.formData, 'fileName', data[0])
      this.$set(this.formData, 'fileRealName', data[1])
      this.$set(this.formData, 'url', data[2])
    },
    headerCellClassName(data) {
      if (['returnNumber'].indexOf(data.column.property) != -1) {
        return 'column_bt'
      }
    },
    // 合计行
    getSummaries(param) {
      const {
        columns,
        data
      } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index == 0) {
          sums[index] = '合计'
          return
        }
        switch (column.property) {
          case 'outsourceNumber':
            sums[index] = data.map(item => item.outsourceNumber).reduce((prev, curr) => {
              if (curr) {
                return new Big(prev).plus(curr).toString()
              } else {
                return new Big(prev).toString()
              }
            }, 0)
            break
        }
        switch (column.property) {
          case 'disqualificationNumber':
            sums[index] = data.map(item => item.disqualificationNumber).reduce((prev, curr) => {
              if (curr) {
                return new Big(prev).plus(curr).toString()
              } else {
                return new Big(prev).toString()
              }
            }, 0)
            break
        }
        switch (column.property) {
          case 'returnNumber':
            sums[index] = data.map(item => item.returnNumber).reduce((prev, curr) => {
              if (curr) {
                return new Big(prev).plus(curr).toString()
              } else {
                return new Big(prev).toString()
              }
            }, 0)
            break
        }
      })
      return sums
    },
    // 勾选
    cellClassName(data) {
      if (data.column.property == 'operate') {
        if (data.rowIndex % 2 == 0) {
          // 单数行
          return 'fixed one'
        } else {
          // 双数行
          return 'fixed two'
        }
      }
    },
    rowClassName({ row, rowIndex }) {
      if (rowIndex == this.tableData.length - 1) {
        return 'addRow'
      }
    },
    // 编辑
    getInfo() {
      getInfo(this.id).then((res) => {
        Object.keys(this.formData).forEach((key) => {
          // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.formData.returnBy = res.data.returnBy.toString()
        this.$nextTick(() => {
          this.isAutomatically = res.data.automaticCreate == 1
          console.log(this.isAutomatically)
        })
        this.formData.supplierReturnGoodsId = res.data.supplierReturnGoodsId // 交货方式id
        this.outsourceSupplierId = res.data.outsourceSupplierId // 供应商id
        this.outsourceOrderId = res.data.outsourceOrderId // 订单明细id
        this.formData.deliveryTypeLabel = res.data.returnTypeName // 交货方式
        this.formData.returnTypeCode = res.data.returnTypeCode // 交货方式code
        this.listData = res.data.detailList // 订单明细详情
        this.listData.forEach(item => {
          this.showListDataOne = item.showListData
        })
      })
    },
    // 选择不良品处置单
    chooseOrders() {
      this.$layer.iframe({
        // 弹框
        content: {
          content: rejectsDispose, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            id: this.rejectsDisposeId ? this.rejectsDisposeId : ''
          } // props
        },
        area: ['880px', '650px'],
        title: '选择不良品处置单', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    // 选择外协订单号
    purchaseOrder() {
      this.$layer.iframe({
        // 弹框
        content: {
          content: searchMaterial, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            id: this.outsourceOrderId ? this.outsourceOrderId : ''
          } // props
        },
        area: ['880px', '650px'],
        title: '选择外协订单号', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    // 选择订单明细
    addRow() {
      if (this.formData.outsourceOrderCode || this.formData.qualityDisqualificationDisposeCode) {

      } else {
        this.$message.warning('请选择外协订单号或不良品处置单')
        return
      }
      this.$layer.iframe({
        // 弹框
        content: {
          content: addOrder, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            id: this.outsourceOrderId,
            selectedRow: this.listData
          } // props
        },
        area: ['880px', '650px'],
        title: '选择订单明细', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    // 选择交货方式
    chooseWays() {
      if (!this.formData.outsourceOrderCode) {
        this.$message.warning('请选择采购定号单或不良品处置单')
        return
      }
      this.$layer.iframe({
        // 弹框
        content: {
          content: addSupplier, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            selectionId: this.outsourceSupplierId ? this.outsourceSupplierId : '',
            id: this.formData.supplierReturnGoodsId ? this.formData.supplierReturnGoodsId : ''
          } // props
        },
        area: ['880px', '700px'],
        title: '选择交货方式', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    // 选择人员
    chooseUser() {
      this.$layer.iframe({// 弹框
        content: {
          content: ChooseUser, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            selectedIds: this.formData.returnBy
          }// props
        },
        area: ['1320px', '700px'],
        title: '选择人员', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    chooseUserCallback(row) {
      // console.log(row)
      this.formData.returnBy = row[0].userId
      this.formData.returnByName = row[0].realName
    },
    cancel() {
      this.$layer.close(this.layerid) // 关闭弹框
    },
    selectionChange(row) {
      console.log(row, 333333)
      this.selectionsAll = row
    },
    deleteRow() {
      this.selectionsAll.forEach(item => {
        this.listData.splice(this.listData.indexOf(item), 1)
      })
    },
    // 查询供应商信息以及订单明细
    inquireOrder() {
      if (this.formData.outsourceSupplierId) {
        outsourceOrder(this.outsourceOrderId).then(res => {
          this.formData.deliveryTypeLabel = res.data.deliveryType // 交货方式
          this.formData.returnTypeCode = res.data.returnTypeCode // 交货方式code
          this.formData.consignee = res.data.consignee // 收货人
          this.formData.contract = res.data.contract // 联系方式
          this.formData.announcements = res.data.announcements // 注意事项
          this.formData.receiveAddress = res.data.receiveAddress // 收货地址
          this.formData.supplierReturnGoodsId = res.data.supplierReturnGoodsId // 交货方式id
          this.formData.supplierReturnGoodsId = res.data.supplierReturnGoodsId // 交货方式id
          this.listData = res.data.orderDetailList // 订单明细
          this.listData.forEach(item => {
            item.remark = ''
            item.materialUnitLabel = item.materialUnitName
            if (!item.outsourceOrderDetailId) {
              item.outsourceOrderDetailId = item.id
              delete item['id']
            }
          })
        })
      } else {
        this.formData.deliveryTypeLabel = ''// 交货方式
        this.formData.returnTypeCode = '' // 交货方式code
        this.formData.consignee = '' // 收货人
        this.formData.contract = '' // 联系方式
        this.formData.announcements = ''// 注意事项
        this.formData.receiveAddress = ''// 收货地址
        this.formData.supplierReturnGoodsId = '' // 交货方式id
        this.formData.supplierReturnGoodsId = '' // 交货方式id
        this.listData = [] // 订单明细
      }
    },
    // 选择外协订单号的回调
    chooseCustomer(row) {
      this.formData.outsourceSupplierId = row.outsourceSupplierInformationId // 供应商id
      this.formData.outsourceSupplierName = row.supplierName // 外协供应商
      this.formData.outsourceOrderCode = row.code // 外协订单号
      this.formData.outsourceOrderId = row.id // 订单号id
      this.outsourceOrderId = row.id // 订单号id
      this.outsourceSupplierId = row.outsourceSupplierInformationId // 供应商id
      this.formData.qualityDisqualificationDisposeCode = '' // 不良品处置单
      this.formData.qualityDisqualificationDisposeId = '' // 不良品处置单id
      this.rejectsDisposeId = ''
      delete row.id
      this.showListDataOne = false
      // 有供应商才调用详情
      this.inquireOrder() // 查询供应商信息以及订单明细
    },
    // 选择供应商信息交货方式的回调
    deliveryManner(row) {
      this.formData.deliveryTypeLabel = row.deliveryTypeLabel // 交货方式
      this.formData.returnTypeCode = row.deliveryTypeCode // 交货方式id
      this.formData.consignee = row.consignee // 收货人
      this.formData.contract = row.contract // 联系方式
      this.formData.announcements = row.announcements // 注意事项
      this.formData.receiveAddress = row.receiveAddress // 收货地址
      this.formData.supplierReturnGoodsId = row.id // 交货方式id
      delete row.id
    },
    // 选择添加订单明细的回调
    showMaterial(data) {
      console.log(data)
      data.forEach(item => {
        item.remark = ''
        if (!item.outsourceOrderDetailId) {
          item.outsourceOrderDetailId = item.id
          item.id = ''
          delete item.id
        } else if (item.id === item.outsourceOrderDetailId) {
          item.id = ''
          delete item.id
        }
        item.materialUnitLabel = item.materialUnitName
      })
      this.listData = data
    },
    // 选择不良品处置单的回调
    rejectsDispose(data) {
      this.rejectsDisposeId = data.id // 不良品处置id
      this.inquireOutsourceRejectsDispose() // 查询外协订单号以及供应商
    },
    inquireOutsourceRejectsDispose() { // 根据不良品处置单查询外协订单号以及供应商以及订单明细
      outsourceRejectsDispose(this.rejectsDisposeId).then(res => {
        this.formData.outsourceSupplierName = res.data.supplierName // 外协供应商名称
        this.formData.outsourceOrderCode = res.data.code // 外协订单号
        this.formData.outsourceOrderId = res.data.id // 订单号id
        this.outsourceOrderId = res.data.id // 订单号id
        this.formData.qualityDisqualificationDisposeCode = res.data.qualityDisqualificationDisposeCode // 不良品处置单
        this.formData.qualityDisqualificationDisposeId = res.data.qualityDisqualificationDisposeId // 不良品处置单id
        this.listData = res.data.detailList // 订单明细
        this.formData.deliveryTypeLabel = res.data.deliveryTypeLabel // 交货方式
        this.formData.returnTypeCode = res.data.deliveryTypeCode // 交货方式code
        this.formData.consignee = res.data.consignee // 收货人
        this.formData.contract = res.data.contract // 联系方式
        this.formData.announcements = res.data.announcements // 注意事项
        this.formData.receiveAddress = res.data.receiveAddress // 收货地址
        this.formData.outsourceSupplierId = res.data.outsourceSupplierInformationId // 供应商id
        this.formData.supplierReturnGoodsId = res.data.outsourceSupplierReturnGoodsId // 交货方式id
        this.outsourceSupplierId = res.data.outsourceSupplierInformationId // 供应商id
        this.listData.forEach(item => {
          item.showListData = true
          this.showListDataOne = true
          item.id = item.materialId
          delete item.id
          item.materialUnitLabel = item.materialUnitName
          item.disqualificationNumber = item.qualityDisqualificationDisposeNumber
          item.outsourceNumber = ''
        })
      })
    },
    // 保存
    onSave() {
      this.$refs['form'].validate((valid) => {
        if (this.listData.filter(item => !item.returnNumber).length > 0) {
          this.$message.warning('退货数量不能为空')
          return
        } else if (this.listData.filter(item => item.returnNumber && !this.SETTINGS.reg_no_zero.test(item.returnNumber)).length > 0) {
          this.$message.warning('退货数量未正确填写')
          return
        }
        if (this.listData.length <= 0) {
          this.$message.warning('请添加外协退货单明细')
          return
        }
        this.listData.forEach(item => {
          if (item.returnTime == null) {
            item.returnTime = ''
          }
        })
        if (valid) {
          this.formData.detailList = this.listData
          addOrUpdate({ ...this.formData }).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.getList() // 调用父组件的刷新方法
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.table_container {
  padding-bottom: 20px !important;
  padding-top: 0px !important;
}
/deep/ .el-table__fixed-footer-wrapper {
  .el-table__cell:last-of-type {
    height: 39px !important;
  }
}
.title {
  margin-left: 25px;
  padding-bottom: 20px;
  font-size: 24px;
  width: 100%;
}
.numberComponents {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
/deep/ .el-input-number.is-controls-right .el-input-number__increase {
  height: 15px;
}
.el-icon-remove {
  font-size: 25px;
  color: red;
  height: 100%;
  width: 100%;
  border: 0px;
  background-color: transparent;
}
/deep/ .el-form-item__content {
  margin-left: 0 !important;
}
/deep/ .el-form-item__label {
  text-align: right;
}
.expand_radio {
  /deep/ .el-form-item__content {
    text-align: left;
  }
}
.expand_container {
  .el-form-item {
    margin-bottom: 10px;
  }
  .expand_file {
    margin-bottom: 0px;
  }

  /deep/ .el-form-item__label {
    width: 130px !important;
  }
  /deep/ .el-form-item__content {
    width: 710px !important;
  }
}
.main_main {
  .form_padding {
    /deep/ .el-form-item {
      margin-right: 0px;
    }
    /deep/ .el-form-item__label {
      width: 120px !important;
    }
    /deep/ .el-form-item__content {
      width: 270px;
    }
    .remark {
      /deep/ .el-form-item__content {
        width: 690px !important;
        height: 60px;
        overflow-y: auto;
      }
    }
  }
}
/deep/ .el-table th.el-table__cell > .cell {
  position: unset;
}
.order_header{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .info_button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
